<template>
  <div id="city">
    <div class="cities">
      <div class="cs">热门城市</div>
      <ul class="hotCity">
        <li @click="click(c)" v-for="(c, index) in city.hot" :key="index">
          {{ c }}
        </li>
      </ul>
      <div class="cs">其他</div>

      <!-- <ul>
        <li v-for="(ci, index) in city.cts" :key="index">
          <van-cell :title="ci.nm" @click="click(ci.nm, ci.id)" />
        </li>
      </ul> -->

   <div>
    <!-- 循环右侧索引栏字母 -->
    <van-index-bar :index-list="indexList" highlight-color> 
      <!-- 建立一个空div进行循环，给索引和城市添加数据，渲染页面 -->
      <div v-for="(item,index) in cityIndex" :key="index" >
        <van-index-anchor :index="item.letter" />
        <van-cell :title="item.name"  @click="click(item.name, item.id)"/>
      </div>
    </van-index-bar>
  </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      city: [],
      name: "",
      citypy: [],
      indexList:[],
      cityIndex:[]
    };
  },
  props: {
    citys: {
      type: String,
      default: "",
    },
    activeName: {
      type: String,
      default: "",
    },
    names: {
      type: String,
      default: "",
    }
  },
  created() {
    
    this.getCity();
  },
  computed: {
    ...mapState(["cityid"]),
  },
  methods: {
    // 城市吉联
    cities(data){
        //先定义右侧索引栏
        var a = data.map(item=>Array.from(item.py).splice(0,1))   //遍历数据的拼音，截取出首字母
        var UpperCase = Array.from(new Set(Array.from(a.toString()))).map(item=>item.toUpperCase())   //每个字母变为字符串，转一个总数组，去重，转数组，遍历转为大写字母
        this.indexList = UpperCase.sort().slice(1)    //排序，取出从第二个往后的字母
        //定义模拟的城市对象
        let cityarr = []  
        for(var i = 0; i < this.indexList.length; i++){   //循环字母
          cityarr.push({letter:this.indexList[i]})    //先将字母以对象形式插入到数组中
          for(var j = 0; j < data.length; j++){   //循环所有的数据
            if(this.indexList[i] === data[j].py.slice(0,1).toUpperCase()){    //找出索引字母与循环所有数据的首字母一样
              cityarr.push({      //将城市名字以对象的形式插入数组中
                name:data[j].nm,
                id:data[j].id
              })
            }
          }
        }
        this.cityIndex = cityarr
      },
    ...mapMutations(["setcityid", "setactives"]),
    async getCity() {
      await this.axios
        .get("https://apis.netstart.cn/maoyan/cities.json")
        .then((re) => {
          console.log(re);  
          this.city = re.data;
          this.cities(re.data.cts)
        });
    },
    // 获取城市id
    click(c, cityid) {
      console.log(c);
      console.log(cityid);
      // 传城市名字
      this.$emit("materials", c);
      // 传tab的name值给父组件
      this.$emit("material", this.names);
      // 全局存城市id

      this.setcityid(cityid);
      if (this.names == "a") {
        this.setactives("a")
      }

    },
  },

};
</script>

<style scoped>
.cities .hotCity {
  display: flex;
  flex-wrap: wrap;
}

.cities .cs {
  margin: 10px 0 0 10px;
}

.cities .hotCity li {
  width: auto;
  height: 30px;
  line-height: 30px;
  background-color: #aaa8a8;
  padding: 0 5px;
  margin-top: 10px;
  margin-left: 10px;
  border-radius: 5px;
  font-size: smaller;
}
</style>